<template>
    <view class="tt">
      <view class="content">
        <view class="container">
          <uni-card >
            <view class="order">
              <view class="itemm">{{ taskDetail.title }}</view>
              <text class="state">{{ getStatusText(taskDetail.status) }}</text>
            </view>
            <view class="time">订单号:{{ taskDetail.id }} </view>
            <view class="time">类型:{{ taskDetail.type }} </view>
            <view class="time">业务领域:{{ taskDetail.domain }} </view>
            <view class="time">联系方式:{{ taskDetail.title }}</view>
            <view class="details">
              <view class="time">创建时间:{{ taskDetail.updatedAt }}</view>

            </view>
            <view class="ff">
        <view class="hh">勘测图片1:</view>
			<view @click="test1" class="cc">
				<image :src="pictures1" mode="" class="bb"></image>
			</view>
      <view class="hh">勘测图片2:</view>
      <view @click="test2" class="cc">
				<image :src="pictures2" mode="" class="bb"></image>
			</view>
      <view class="hh">勘测图片3:</view>
        <view @click="test3" class="cc">
				<image :src="pictures3" mode="" class="bb"></image>
			</view>
      <view class="hh">勘测图片4:</view>
      <view @click="test4" class="cc">
      	<image :src="pictures4" mode="" class="bb"></image>
      </view>
      <view class="hh">勘测图片5:</view>
      <view @click="test5" class="cc">
      	<image :src="pictures5" mode="" class="bb"></image>
      </view>
      <view class="hh">勘测图片6:</view>
      <view @click="test6" class="cc">
      	<image :src="pictures6" mode="" class="bb"></image>
      </view>
      <view class="hh">勘测图片7:</view>
      <view @click="test7" class="cc">
      	<image :src="pictures7" mode="" class="bb"></image>
      </view>
      <view class="hh">勘测图片8:</view>
      <view @click="test8" class="cc">
      	<image :src="pictures8" mode="" class="bb"></image>
      </view>
      <view class="hh">勘测图片9:</view>
      <view @click="test9" class="cc">
      	<image :src="pictures9" mode="" class="bb"></image>
      </view>
      <view class="hh">勘测图片10:</view>
       <view @click="test10" class="cc">
      	<image :src="pictures10" mode="" class="bb"></image>
      </view>
			  </view>
            <view class="receiving" @click="uploadPicture(taskDetail.id)">提交工单</view>
          </uni-card>
          <view class="bot"></view>
        </view>
      </view>
  </view>
</template>

<script setup>
import taskApi from '@/api/task.js'
import pictureApi from '@/api/picture'
const uploadAliyun = require('../../components/aliyunOss/upload/uploadAliyun.js');
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const taskDetail = ref({})
const pictures = ref([]);
const pictures1 = ref('');
const pictures2 = ref('');
const pictures3 = ref('');
const pictures4 = ref('');
const pictures5 = ref('');
const pictures6 = ref('');
const pictures7 = ref('');
const pictures8 = ref('');
const pictures9 = ref('');
const pictures10 = ref('');
const OrderID=ref([])
// 获取地址参数
onLoad((params) => {
    // 获取任务 ID 并获取详情数据
    getTaskDetail(params.id)
  })
function   test1() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        console.log(res);
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
              console.log(res,"上传图片");
				pictures1.value=res.oss_file
              console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }
  function   test2() {
     // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
     uni.chooseMedia({
       count: 1,//最多可以选择几张图片
       mediaType: ['image/jpg'],//图片类型
       sourceType: ['album', 'camera'],//可从相机、相册拿取
       success: (res) => {
         // 重点！这个就是临时路径！
         const file = res.tempFiles[0].tempFilePath
         // console.log(res.tempFiles[0].tempFilePath)
         // 上传前,要确保临时路径是正确的(开始上传到OSS)
         // 对于此api参数，详见uploadAliyun.js文件
         uploadAliyun({
             // 微信文件临时路径
             // 只要涉及到上传,这东西就一定会有!
             filePath: file,
             // 目录层级(可自由填写)
             // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
             dir: "upload/survey",
             // 文件名及扩展名(可自由填写)
             // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
             name: `survey.${getFormat(file)}`,
             success: (res) => {
               console.log(res,"上传图片");
  				pictures2.value=res.oss_file
				  console.log(pictures.value,"pictures.value")
             },
             fail: (err) => {
               console.log(err)
               console.log("上传失败")
             }
         })
       }
     })
   }
function   test3() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
              console.log(res,"上传图片");
				pictures3.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test4() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
				pictures4.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test5() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
				pictures5.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test6() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
				pictures6.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test7() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
				pictures7.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test8() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
				pictures8.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test9() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
				pictures9.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test10() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "/survey",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `survey.${getFormat(file)}`,
            success: (res) => {
				pictures10.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }


async function getTaskDetail(id) {
    // if (!id) return
    const res = await   taskApi.detail(id)
	if (res.code===200) {
		taskDetail.value=res.data
    OrderID.value=res.data.id
	}else{
		uni.showToast({
     title:"获取详情失败",
     icon: 'closeempty',
     duration: 2000//持续的时间
   })
	}
    // 渲染数据
  }

// 提交订单
pictures.value.push(pictures1, pictures2, pictures3, pictures4, pictures5, pictures6, pictures7, pictures8, pictures9, pictures10);

// 在 uploadPicture 函数中处理图片上传逻辑
async function uploadPicture(id) {
  // 输出存储图片 URL 的数组
  console.log(pictures.value);

  // 将图片 URL 的数组传递给上传接口
   const res = await pictureApi.uploadPicture({
     fileUrlList: pictures.value
       .filter(picture => picture.value !== '') // 过滤掉为空字符串的数据
       .map(picture => picture.value), // 提取 URL 字符串
     fileType: 1,
     sheetId: id
   });

  console.log(res, "文件上传");
  if (res.code === 200) {
    const res = await taskApi.detail(id);
    console.log(res, " oss上传");
    taskDetail.value = { ...res.data, status: 2 };

    // 提交订单信息
    const ref = await taskApi.submitList(taskDetail.value);
    console.log(ref, "提交订单信息");

    // 弹出提示信息
    uni.showToast({
      title: "提交勘测完成",
      icon: 'checkmarkempty',
      duration: 2000
    });
    // 设置延时为3秒
			setTimeout(function() {
				// 3秒后切换到指定页面
				uni.navigateTo({url:"/subpkg_work/Surveying/Surveying"})
			}, 2000);
  }
}

  function getStatusText(status) {
  switch (status) {
    case 0:
      return '待支付'
    case 1:
      return '勘测中'
    case 2:
      return '已勘测'
    case 3:
      return '安装中'
    case 4:
      return '已完成'
    case 5:
      return '已取消'
    case 6:
      return '退款中'
    case 7:
      return '已退款'
    default:
      return ''
  }
}
function getFormat(name) {
    return name.substring(name.lastIndexOf("/") + 1)
  }
</script>

<style lang="scss" scoped>
.content {
		height: 100vh;
	background-color:#f5f5f5 ;
	padding-top: 20px;
		height: 100vh;
	}
	.container{
		margin-left: 2%;
	}
  .cc{
    margin-bottom: 10px;
  	width: 300px;
  	border: 1px solid #c7c9ce;
  	height: 200px;
  }
  .hh{
    margin-top: 10px;
  }
  .bb{
  	width: 300px;
  	height: 200px;
  }
	.uni-card{
		border: 1px solid #ffffff;
		margin-left: 30px;
		width: 85%;
		background-color: #ffffff !important;
	}
	.order{
		display: flex;
		justify-content: space-between;
		color: #ffffff;
	}
	.state{
		color: #fe486e;
		padding-bottom: 10px;
	}
	.time{
		color:#7a7b75 ;
		font-size: 12px;
	}

  .itemm{
    color: #000;
  }
	.details{
		display: flex;
		justify-content: space-between;
	}
	.particulars{
		color: #fff;
		width: 100px;
		background-color: #8bc34a;
		text-align: center;
		border-radius: 50px;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	.message-blank{
		width: 100%;
		text-align: center;
		margin-top: 30px;
	}
  .receiving{
    width: 100%;
    height: 10%;
    text-align: center;
    text-align: center;
    border: 1px solid #e85645;
    color: #fe4833;
    border-radius: 5px;
    margin-top: 10px;
  }
  .ff {
	  border-top: 1px solid #f4f4f4;
	}
  .bot{
    padding-top: 50px;
  }
</style>
